<template>
  <!--今日推荐-->
  <div class="today-recommend">
    <div class="py-container">
      <ul class="recommend">
        <li class="clock">
          <div class="time">
            <img src="./images/clock.png"/>
            <h3>秒杀</h3>
            <div>
              <p>{{ hours }}小时{{ minutes }}分钟{{ seconds }}秒</p>
            </div>
          </div>
        </li>
        <!--<li class="banner">-->
        <!--  <img src="./images/today01.png"/>-->
        <!--</li>-->
        <!--<li class="banner">-->
        <!--  <img src="./images/today02.png"/>-->
        <!--</li>-->
        <!--<li class="banner">-->
        <!--  <img src="./images/today03.png"/>-->
        <!--</li>-->
        <!--<li class="banner">-->
        <!--  <img src="./images/today04.png"/>-->
        <!--</li>-->
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(sku, index) in seckillSkus" :key="sku.skuId">
              <img :src="sku.skuInfo.skuDefaultImg" style="height: 70%;display:block;margin: 5px auto;cursor: pointer"
                   @click="toDetail(sku.skuId)"/>
              <p style="color: #999;margin-left: 50px;height: 15px;overflow: hidden">{{ sku.skuInfo.skuTitle }}</p>
              <span style="font-size: 18px;color: red;font-weight: 600;margin-left: 50px">￥{{ sku.seckillPrice }}</span>
              <s>{{ sku.skuInfo.price }}</s>
            </div>
          </div>
          <div class="swiper-pagination"></div>
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
        </div>
      </ul>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper';

export default {
  name: "Recommend",
  components: {},
  props: {},
  data() {
    return {
      seckillSkus: [],
      totalSeconds: 7199, // 倒计时总秒数，这里设置为1小时
      hours: 0,
      minutes: 0,
      seconds: 0
    }
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    seckillSkus: {
      immediate: true,
      handler() {
        this.$nextTick(() => {
          new Swiper('.swiper-container', {
            slidesPerView: 4, // 每次显示4个slides
            //spaceBetween: 20, // slides之间的间距
            // Swiper的配置选项
            //pagination: {
            //  el: '.swiper-pagination',
            //},
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            },
          })
        })
      }
    }
  },
  //方法集合
  methods: {
    //获取当前秒杀商品信息
    async getCurrentSeckillSkus() {
      let result = await this.$API.reqCurrentSeckillSkus()
      if (result.code === 0) {
        this.seckillSkus = result.data
      }
    },
    //去商品详情页
    toDetail(skuId) {
      this.$router.push({name: "detail", params: {skuId}})
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getCurrentSeckillSkus()
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.timer = setInterval(() => {
      if (this.totalSeconds > 0) {
        this.hours = Math.floor(this.totalSeconds / 3600);
        this.minutes = Math.floor((this.totalSeconds % 3600) / 60);
        this.seconds = this.totalSeconds % 60;
        this.totalSeconds--;
      } else {
        clearInterval(this.timer);
      }
    }, 1000);
  },
  //生命周期 - 创建之前
  beforeCreate() {
  },
  //生命周期 - 挂载之前
  beforeMount() {
  },
  //生命周期 - 更新之前
  beforeUpdate() {
  },
  //生命周期 - 更新之后
  updated() {
  },
  //生命周期 - 销毁之前
  beforeDestroy() {
    clearInterval(this.timer);
  },
  //生命周期 - 销毁完成
  destroyed() {
  },
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {
  }
};
</script>

<style scoped lang="less">
.today-recommend {
  .py-container {
    width: 1200px;
    margin: 0 auto;

    .recommend {
      height: 200px;
      background-color: #eaeaea;
      margin: 10px 0;
      display: flex;

      .clock {
        width: 16.67%;
        background-color: #5c5251;
        color: #fff;
        font-size: 18px;
        text-align: center;

        .time {
          padding: 30px 0;
        }

        h3 {
          margin: 9px 0;
          font-weight: 700;
          font-size: 18px;
          line-height: 30.06px;
        }
      }

      .swiper-container {
        width: 100%;
        height: 100%;
      }

      .banner {
        width: 20.83%;

        img {
          width: 100%;
          height: 100%;
          transition: all 400ms;

          &:hover {
            opacity: 0.8;
          }
        }
      }
    }
  }
}
</style>
